
<template>
  <div>
    <div class="form-body" :key="element.metaRefresh">
      <el-form
        ref="formRef"
        :model="lowCode.model"
        :label-width="element.options.labelWidth + 'px'"
        :label-position="element.options.labelPosition"
        :size="element.options.size"
      >
        <template tag="div" v-for="(el, index) in element.items" :key="index">
          <div v-if="element.key">
            <render-parse
              :element="el"
              :key="el.key"
              :index="index"
              :parent="element.items"
            >
            </render-parse>
          </div>
        </template>
      </el-form>
    </div>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, toRefs, ref, inject } from "vue";
import type { Component, LowCodeImp } from "@/components/low-code/core/";

export default defineComponent({
  name: "formWidget",
  props: ["element"],
  setup(props) {
    const getLowCodeInstance = inject("getLowCodeInstance") as Function;
    const lowCode = getLowCodeInstance() as LowCodeImp;
    const { element } = toRefs<{ element: Component }>(props);
    const formRef = ref();
    (<{ ref: any }>element.value.options).ref = formRef;
    return {
      formRef,
      element,
      lowCode,
    };
  },
});
</script>

<style  scoped>
.drawing-board {
  min-height: 80px;
}
</style>
